<template>
  <div class="datas_tabs">
        <el-tabs type="border-card" key="datas_tabs" class="datas_el_tabs">
            <el-tab-pane label="搜航班号">
                <FlightQueryVue/>
            </el-tab-pane>
            <el-tab-pane label="搜起降地">
                <TakeoffandlandingplaceVue/>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import FlightQueryVue from '../query/FlightQuery.vue';
import TakeoffandlandingplaceVue from '../query/Takeoffandlandingplace.vue';
</script>

<style lang="less" scoped>
.datas_tabs{
    width: 100%;
    height: 100%;
    margin: auto;
}
:deep(.el-tabs){
    width: 100%;
    height: 100%;
}
:deep(.el-tabs--border-card){
    border-radius: 0px 20px 20px 0px;
    background: var(--el-bg-color-overlay);
}
:deep(.el-tabs__header){
    width: 100%;
    height: 38px;
    transform: translate(0%, 0%);
    border-radius: 20px 20px 0px 0px;
    background-color: var(--el-fill-color-light);
}
:deep(.el-tabs__nav-wrap) {
    overflow: hidden;
    margin-bottom: -1px;
    position: relative;
}
:deep(.el-tabs__nav-scroll){
    width: 90%;
    height: 100%;
}
:deep(.el-tabs__item){
    padding: 0px 22px;
    font-size: 18px;
    // border-radius: 20px 0px 0px 0px;
    font-family: "微软雅黑";
}
:deep(.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active) {
    color: #000;
    background-color: var(--el-bg-color-overlay);
    border-right-color: var(--el-border-color);
    border-left-color: var(--el-border-color);
}
:deep(.el-tabs__content){
    transform: translate(1.5%, 0%);
    width: 92%;
    height: 300%;
    // box-shadow: var(--el-box-shadow-dark);
}
</style>